<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="style/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="style/dashboard.css" rel="stylesheet">	
  </head>

  <body>
    <!--右边主页面区域-->
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
		  <div class="header clearfix">
			<nav>
			  <ul class="nav nav-pills">
				<li class="active"><a href="#">体育</a></li>
				<li ><a href="#">科技</a></li>
			  </ul>
			</nav>
			<hr>
		  </div>
		  
		  <!--体育栏目-->
		<div>
			<ul>
				<li>
					<a href="#">世界杯开赛啦</a>
				</li>
				<li>
					<a href="#">NBA开赛倒计时</a>
				</li>
			</ul>
			<!--详情-->
			<div class="jumbotron">
				<h2>世界杯开赛啦</h2>
				<p>世界杯于明晚8点举行开幕式.....</p>
			</div>
		</div>  
		  <!--科技栏目-->
		<div>
			<ul >
				<li>
					<span>5G时代到来了 </span>
					<button class="btn  btn-default btn-xs">查看(Push)</button>&nbsp;
					<button class="btn btn-default btn-xs">查看(replace)</button>
				</li>
				<li>
					<span>互联网大洗牌</span>
					<button class="btn  btn-default btn-xs">查看(Push)</button>&nbsp;
					<button class="btn  btn-default btn-xs">查看(replace)</button>
				</li>
			</ul>
			<!--详情-->
			<div class="jumbotron">
				<h2>世界杯开赛啦</h2>
				<p>世界杯于明晚8点举行开幕式.....</p>
			</div>
		</div>		 
	</div>
  </body>
</html>
